<template>
    <div class="container">
        <!-- 左上角关闭按钮 -->
        <van-icon
            name="cross"
            class="close-icon"
            @click="goBack"></van-icon>
        <!-- 密码提示 -->
        <div class="password-hint">请输入登录密码</div>
        <!-- 金额展示 -->
        <p class="amount"><span style="font-size: 1.6rem">￥</span>{{ amount }}</p>
        <!-- 用户信息 -->
        <div class="user-info">
            <p class="username">用户名</p>
            <span class="user-role">{{ name }}</span>
        </div>
        <!-- 输入密码区域 -->
        <!-- :gutter="10" -->
        <span
            class="error_msg"
            :style="{ opacity: errorMsg ? 1 : 0 }"
            >登录密码不正确</span
        >
        <div class="password-input">
            <van-password-input
                v-model="enteredPassword"
                :length="6"
                :gutter="10"
                :focused="showKeyboard"
                @focus="showKeyboard = true"
                @blur="showKeyboard = false" />
            <van-number-keyboard
                v-model="enteredPassword"
                :show="showKeyboard" />
        </div>
    </div>
</template>

<script>
import { Notify } from 'vant';
export default {
    props: {
        // amount: {
        //     type: String,
        //     required: true,
        // },
    },
    data() {
        return {
            amount: 123,
            name: '热巴',
            enteredPassword: '',
            showKeyboard: false,
            errorMsg: false, //错误提示
        };
    },
    watch: {
        enteredPassword(val) {
            this.errorMsg = false;
            if (val.length === 6) {
                if (val == '000000') {
                    this.errorMsg = true;
                    return;
                }
                this.$http
                    .post('/send/password', { password: val })
                    .then(res => {
                        const { success, data, msg } = res.data;
                        if (success) {
                            if (msg == '验证码错误') {
                                this.errorMsg = true;
                            }
                        }
                        Notify({ type: success ? 'success' : 'warning', message: msg });
                        success && this.$router.push('/validPassword');
                    })
                    .catch(err => {
                        this.errorMsg = true;
                    });
            } else if (val.length > 6) {
                this.enteredPassword = val.substring(0, 6);
            }
        },
    },
    mounted() {
        this.getInfos();
    },
    methods: {
        getInfos() {
            this.$http.get('/get/infos').then(res => {
                const { success, data, msg } = res.data;
                console.log(res.data);
                if (success) {
                    this.amount = data.amount;
                    this.name = data.name;
                }
            });
        },
        goBack() {
            this.$router.go(-1);
        },
    },
};
</script>

<style scoped lang="scss">
.password-page {
    position: relative;
}

.close-icon {
    position: absolute;
    top: 12px;
    left: 16px;
    cursor: pointer;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px ½0px;
}

.password-hint {
    text-align: center;
    font-size: 1.2rem;
}

.amount {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
}

.user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    .username {
        color: grey;
    }
}

.user-role {
    text-align: right;
}
.password-input {
    margin-top: 1rem;
}
.van-password-input__security li {
    background-color: #f6f6f6;
    border-radius: 8px;
}
.van-password-input__item--focus {
    border: 1px solid blue !important;
}
</style>
